import React from 'react';
import { Layout } from 'antd';
import { History } from "history";
import "./index.less"


import Menu from './Menu';

import RouteView, { IRouteViewProps } from '../../router/RouteView'


import { menuList } from '../head/head'


const { Content, Sider } = Layout;





export type MenuListObject = {
    menuList?: Array<MenuList> | unknown;
}


export type MenuList = {
    title?: string;  // 标题
    path?: string;     // 路径
    fill?: string;   // 颜色
    iconName?: string;  // icon名称
}


type MenusState = {

    collapsed?: boolean;
    menuList?: Array<MenuList> | unknown;
}

interface MenuspProp extends IRouteViewProps {

    history: History;

}


class Menus extends React.Component<MenuspProp, MenusState> {

    constructor(props: MenuspProp) {
        super(props);
        let obj = this.props.history.location.state as MenuListObject;
        //局部的 state
        this.state = {
            collapsed: false,
            menuList: obj?.menuList ?? menuList,
        };

    }



    setMenuListStateValue = (menuList: MenuList[] | unknown) => {
        this.setState({
            menuList: menuList,
        })
    }

    onCollapse = (collapsed: any) => {

        this.setState({ collapsed });
    };

    render() {
        return (
            <div>

                <Layout className='menuDiv' >
                    <Sider width={238} className="site-layout-background">
                        <div className='flexMenu'>
                            <div style={{ display: 'flex', justifyContent: 'space-evenly', flexWrap: 'wrap' }}>
                                {(this.state.menuList as Array<MenuList>).map((item, index) => {
                                    return <Menu key={index} history={this.props.history} {...item}></Menu>
                                })}
                            </div>

                            <div className='menuBottom'>

                            </div>

                        </div>

                    </Sider>
                    <Layout className="site-layout">

                        <Content style={{ margin: '0 16px' }}>
                            <div style={{ padding: 10, minHeight: 360 }}>
                                <RouteView {...this.props}></RouteView>
                            </div>
                        </Content>
                        {/* <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer> */}
                    </Layout>


                </Layout>
            </div>

        );
    }
}


export default Menus;